<template>
    <div class="container">
        <div class="login-form">
            <el-form ref="ruleFormRef" label-width="100px" :model="ruleForm" style="max-width: 460px" :rules="rules">
                <el-form-item>
                    <h1 class="login-title">厚溥云课堂后台管理系统</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" placeholder="用户名" :prefix-icon="User" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" placeholder="密码" show-password :prefix-icon="Lock" />
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" @click="submitForm(ruleFormRef)" type="primary" style="width: 100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import userApi from '../api/user'
import { useRouter } from 'vue-router'
import {useUserInfo} from '../store'

import type { FormInstance, FormRules } from 'element-plus'

const userStore = useUserInfo()
const   loading =ref(false) 
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    username: '',
    password: '',
  
})

const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            // 启用加载中转菊花效果
            loading.value=true
            // 调用登录api
            userApi.login(ruleForm.username, ruleForm.password).then(res => {
                // 取消加载中转菊花效果
                loading.value=false
                // 在本地存储token（cookie，localStorage）
                localStorage.setItem('member_token',res.data.token)
                // 登录成功跳转至首页
                router.push('/')
            }).then(()=>{
                // 调用获取用户信息接口
                userApi.getInfo().then(res=>{
                    console.log(res.data);
                    // 保存当前登录成功的用户信息（cookie，localStorage）
                    // pinia
                    userStore.userinfo.userName=res.data.name
                })
            }).catch(err => {
                console.log(err);
                loading.value=false
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped>
.login-title {
    width: 100%;
    text-align: center;
    color: #fff;
}

.container {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: #545C64;
}

.login-form {
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 700px;
}
</style>
  